<!-- 弹框table分页选择示例 -->
<template>
  <el-dialog
  title="弹框table分页选择示例"
  :visible.sync="dialogVisible"
  width="50%"
  @closed="handleClose">
  <div>已选择{{this.selectData.length}}条数据</div>
  <el-table v-loading="loading" ref="selectionTable" :row-key='rowKey' :data="dataList" @select="select" @select-all="selectAll">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="用户编号" align="center" key="userId" prop="userId"/>
          <el-table-column label="用户名称" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" />
          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
import { listUser } from "@/api/system/user";
export default {
    props:{
        // 表格rowKey
        rowKey:{
            type:String,
            default:'id'
        }
    },
    data() {
      return {
        dialogVisible: false,
        loading: true,
        // 总条数
        total: 0,
        // 用户表格数据
        dataList: [],
        selectData: [],//选中的所有数据
        // 查询参数
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            userName: undefined,
            phonenumber: undefined,
            status: undefined,
            deptId: undefined
        },
      };
    },
    methods: {
      show(data){
        this.selectData = data || []
        this.getList()
        this.dialogVisible = true
      },
      // 列表数据接口
      getList() {
          this.loading = true;
          listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
              this.dataList = response.rows;
              this.total = response.total;
              this.loading = false;
              this.toggleRowSelection()
            }
          );
      },
      // 单选变化触发
      select(selection, row){
        var flag = selection.some(item=> item[this.rowKey] === row[this.rowKey])
        this.setSelectData(flag,row)
      },
      // 全选变化触发
      selectAll(selection){
        var flag = selection.length > 0
        this.dataList.map(item=>{
          this.setSelectData(flag,item)
        })
      },
      // 在所有选中数据中添加或删除单条数据， flag=true则添加
      setSelectData(flag,row){
        var i = this.selectData.findIndex(item=>item[this.rowKey] === row[this.rowKey])
        if(flag){//已选中
          if(i === -1){//但所有选中数据中没有找到这条选中的数据，则push
            this.selectData.push(row)
          }
        }else{//未选中
          if(i !== -1){//但所有选中数据中存在这条选中的数据，则删除
            this.selectData.splice(i,1)
          }
        }
        console.log(this.selectData)
      },
      // 判断当前页数据是否需要勾选
      toggleRowSelection(){
        this.$nextTick(() => {
          this.selectData.map(item=>{
            var o = this.dataList.find(d=>d[this.rowKey] == item[this.rowKey])
            if(o){
              this.$refs.selectionTable.toggleRowSelection(o,true)
            }
          })
        })
      },
      save(){
        console.log(this.selectData)
        this.$emit('handleSave',this.selectData)
        this.dialogVisible = false
      },
      handleClose() {
        
      }
    }
}
</script>

<style>

</style>